import { StyleSheet } from 'react-native'

export const leaveDetailStyles = StyleSheet.create({
    // 容器样式
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    scrollView: {
        flex: 1,
    },
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    // 卡片样式
    cardHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 12,
    },
    cardLeftContent: {
        flex: 1,
        marginRight: 16,
    },
    cardRightContent: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    cardTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 8,
    },
    departmentText: {
        fontSize: 14,
        color: '#666',
        marginBottom: 0,
    },
    statusText: {
        fontSize: 14,
        color: '#007AFF',
        fontWeight: '500',
    },
    statusContainer: {
        marginTop: 4,
        alignSelf: 'flex-start',
    },

    // 信息行样式
    infoRow: {
        flexDirection: 'row',
        marginBottom: 12,
        alignItems: 'center',
    },
    infoLabel: {
        fontSize: 14,
        color: '#666',
        width: 80,
        marginRight: 8,
    },
    infoValue: {
        fontSize: 14,
        color: '#333',
        flex: 1,
    },
    destinationText: {
        fontSize: 14,
        color: '#333',
        paddingVertical: 4,
    },
    destinationDivider: {
        height: 1,
        backgroundColor: '#e9ecef',
        marginVertical: 8,
        marginLeft: 0,
        marginRight: 20,
    },

    // 请假事由详情样式
    reasonSection: {
        marginTop: 16,
        paddingTop: 16,
        borderTopWidth: 1,
        borderTopColor: '#e9ecef',
    },
    reasonSectionTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 16,
        color: '#333',
    },
    reasonItem: {
        marginBottom: 12,
        backgroundColor: '#f8f9fa',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#e9ecef',
        overflow: 'hidden',
    },
    reasonHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 12,
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderBottomColor: '#e9ecef',
    },
    reasonTypeTitle: {
        fontSize: 15,
        fontWeight: '600',
        color: '#333',
    },
    reasonContent: {
        padding: 12,
        backgroundColor: '#fff',
    },

    // 研究项目样式
    researchItem: {
        flexDirection: 'row' as const,
        marginBottom: 20,
        position: 'relative' as const,
    },
    researchBullet: {
        alignItems: 'flex-start' as const,
        marginRight: 12,
        position: 'relative' as const,
        paddingTop: 6,
    },
    bulletPoint: {
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: '#ccc',
        zIndex: 2,
        marginTop: 2,
    },
    bulletLine: {
        position: 'absolute' as const,
        left: 3,
        top: 16,
        width: 2,
        bottom: -35,
        backgroundColor: '#e5e5e5',
        zIndex: 1,
    },
    researchContent: {
        flex: 1,
    },
    titleDateRow: {
        flexDirection: 'row' as const,
        justifyContent: 'space-between' as const,
        alignItems: 'center' as const,
        marginBottom: 8,
    },
    researchTitle: {
        fontSize: 14,
        fontWeight: '600',
        color: '#333',
        marginBottom: 4,
    },
    researchDate: {
        fontSize: 12,
        color: '#666',
        fontStyle: 'italic',
    },
    researchField: {
        fontSize: 14,
        color: '#666',
        marginBottom: 4,
        lineHeight: 20,
    },

    // 附件样式
    attachmentItem: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 12,
        backgroundColor: '#f8f9fa',
        borderRadius: 8,
        marginBottom: 8,
    },
    imagePreviewContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
    },
    imagePreview: {
        width: 60,
        height: 60,
        borderRadius: 8,
        marginRight: 12,
    },
    imageInfo: {
        flex: 1,
    },
    imageFileName: {
        fontSize: 14,
        color: '#333',
        marginBottom: 4,
        fontWeight: '500',
    },
    imageFileSize: {
        fontSize: 12,
        color: '#666',
    },
    fileName: {
        fontSize: 14,
        color: '#333',
        marginBottom: 4,
        fontWeight: '500',
        marginLeft: 8,
    },
    fileSize: {
        fontSize: 12,
        color: '#666',
        marginLeft: 8,
    },

    // 底部操作按钮样式
    bottomActions: {
        flexDirection: 'row',
        padding: 16,
        backgroundColor: '#fff',
        borderTopWidth: 1,
        borderTopColor: '#e9ecef',
        justifyContent: 'space-between',
    },
    cancelButton: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 12,
        paddingHorizontal: 20,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#ddd',
        backgroundColor: '#fff',
        flex: 1,
        marginRight: 8,
        justifyContent: 'center',
    },
    cancelButtonText: {
        fontSize: 16,
        color: '#666',
        marginLeft: 8,
        fontWeight: '500',
    },
    applyButton: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 12,
        paddingHorizontal: 20,
        borderRadius: 8,
        backgroundColor: '#007AFF',
        flex: 1,
        marginLeft: 8,
        justifyContent: 'center',
    },
    applyButtonText: {
        fontSize: 16,
        color: '#fff',
        marginLeft: 8,
        fontWeight: '500',
    },

    // 无数据文本样式
    noDateText: {
        fontSize: 14,
        color: '#999',
        textAlign: 'center',
        fontStyle: 'italic',
    },

    // 弹窗样式
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContent: {
        backgroundColor: '#fff',
        borderRadius: 12,
        padding: 20,
        margin: 20,
        width: '90%',
        maxWidth: 400,
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 16,
        textAlign: 'center',
    },
    modalInput: {
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 8,
        padding: 12,
        fontSize: 16,
        color: '#333',
        backgroundColor: '#f8f9fa',
        minHeight: 100,
        marginBottom: 20,
    },
    modalButtons: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    modalButton: {
        flex: 1,
        paddingVertical: 12,
        paddingHorizontal: 20,
        borderRadius: 8,
        alignItems: 'center',
        marginHorizontal: 8,
    },
    modalCancelButton: {
        backgroundColor: '#f8f9fa',
        borderWidth: 1,
        borderColor: '#ddd',
    },
    modalCancelButtonText: {
        fontSize: 16,
        color: '#666',
        fontWeight: '500',
    },
    modalApproveButton: {
        backgroundColor: '#38a169',
    },
    modalRejectButton: {
        backgroundColor: '#f56565',
    },
    modalButtonText: {
        fontSize: 16,
        color: '#fff',
        fontWeight: '500',
    },

    // 骨架屏样式
    skeletonBox: {
        backgroundColor: '#f0f0f0',
        borderRadius: 4,
        marginBottom: 8,
    },
    skeletonLine: {
        backgroundColor: '#f0f0f0',
        borderRadius: 4,
        marginBottom: 4,
    },
    skeletonLineLarge: {
        height: 20,
    },
    skeletonLineSmall: {
        height: 16,
        width: '60%',
    },

    // 审批按钮样式
    rejectButton: {
        backgroundColor: '#f56565',
    },
    approveButton: {
        backgroundColor: '#38a169',
    },
    buttonTextWhite: {
        color: '#fff',
    },
    modalSubTitle: {
        fontSize: 14,
        color: '#666',
        marginBottom: 16,
    },

    // Card容器样式
    cardContainer: {
        borderRadius: 12,
        marginHorizontal: 16,
        marginVertical: 8,
        backgroundColor: '#fff',
        shadowColor: 'transparent',
        shadowOffset: {
            width: 0,
            height: 0,
        },
        shadowOpacity: 0,
        shadowRadius: 0,
        elevation: 0,
        borderWidth: 0,
    },
})